<template>
  <div class="news">
    <div v-for="item in newsList" class="news-item" @click="goNewsDetail(item.id)">
      <div class="news-image">
        <img :src="item.imgUrl" alt="" />
      </div>
      <div class="news-content">
        <div class="title">{{ item.title }}</div>
        <div class="abstract">{{ item.zhaiyao }}</div>
        <div class="flexStyle">
          <div class="date">{{ item.addTime }}</div>
          <div class="icon">
            <img src="@/assets/images/next.png" alt="" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts" setup>
const router = useRouter()
const props = defineProps<{
  newsList: any[]
}>()

const goNewsDetail = (id: number) => {
  router.push({ name: 'newsDetail', query: { id } })
}
</script>
<style lang="scss" scoped>
@import '../styles/common.scss';
@import '../styles/web.scss';
@import '../styles/phone.scss';
</style>
